<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jstl/core" prefix="c"%>
<%@ page import="ionis.m2.ila.modele.Person"%>
<%@ page import="java.util.ArrayList"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="/chat_web/js/jquery-1.5.2.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="/chat/css/chat.css" /> 
</head>
<body onload="update();">
<div id="quit">


<a href="/chat_web/do/quit">Quitter</a>

</div>


<script type='text/javascript'>
	var compteur = 0;
	$.ajax({
		type : "GET",
		dataType : "json",
		url : "/chat/do/init",
		success : function(data) {
		compteur = data.indexCurrent;
		getDataAndDrawPage();
		}
	});

	 $(function(){
			$('#keywords').keypress(function(event) {
				if (event.which=="13")
					sendMessage();
					    });
		
			 $('#clear').click(function(){
				 $('#msgPublic').empty();
			 });
			 
			 });

	function getDataAndDrawPage() {
		$.ajax({
			type : "GET",
			data : {
				"compteur" : compteur
			},
			url : "/chat/do/getMessages",
			dataType : "json",
			success : function(data) {
				var persons = data[0];
				compteur = compteur + persons.length;
				var userConnected=data[1];
				drawMessagesPublic(persons);
				drawUserConnected(userConnected);
				getDataAndDrawPage();	
			}
		});
	}
	
	function sendMessage() {
		$.ajax({
			type : "GET",
			data : {
				"message" : $('#keywords').val()
			},
			url : "/chat/do/sendMessage",
			success : function(data) {
				$("#keywords").attr("value", "");
			}
		});
	}

	function drawMessagesPublic(persons) {
		for (key in persons) {
			var msg = persons[key];
			var html;
			if (msg.messageType == 1) {
				html = '<font color="red"> ' + msg.username + '</font>';
				html += " : " + msg.msgCurrent + " <br>";
			} else if (msg.messageType == 2) {
				html = '<font color="blue" size="2"><i><b>' + msg.username + '</b>'+ msg.msgCurrent
						+ '</i></font><br>';
			}
			$("#msgPublic").append(html);
		}
	}

	function drawUserConnected(users) {
		$('#users').empty();
		for (key in users) {
			var user = users[key];
			var html = '<img style="width: 18px;" src="/chat_web/images/yaho.jpg" />&nbsp '
					+ user.username + '</br>';
			$("#users").append(html);
		}
	}


</script>

<div id="title"><b>Chat ionis stm</b></div>

<div id="body">

<div id="users"></div>
<div id="chatWindows">
<div id="msgPublic"></div>
 <div id="msgSend"><input type="text" id="keywords" name="keywords"
	title="Enter key words"  /> <input type="button"
	id="clear" value="Clean" />
</div>
</div>

</div>
</body>
</html>